<template>
  <div class="container">
    <el-form :inline="true" class="tableSearchBox" size="medium">
      <el-form-item>
        <el-button type="primary" @click="showAddRole" icon="el-icon-plus">新增角色</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="新增角色" :visible.sync="dialogAddVisible" width="500px">
      <el-form :model="addParam">
        <el-form-item label="角色名称" :label-width="formLabelWidth">
          <el-input v-model="addParam.roleName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色信息" :label-width="formLabelWidth">
          <el-input v-model="addParam.roleInfo" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="onAddRole">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改信息" :visible.sync="dialogEditVisible" width="500px">
      <el-form :model="editParam">
        <el-form-item label="角色名称" :label-width="formLabelWidth">
          <el-input v-model="editParam.roleName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色信息" :label-width="formLabelWidth">
          <el-input v-model="editParam.roleInfo" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="onEditRole">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title :visible.sync="dialogDeleteVisible" width="350px">
      <div>确定要删除该角色吗?</div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDeleteVisible = false">取 消</el-button>
        <el-button type="primary" @click="onroleDel">确 定</el-button>
      </div>
    </el-dialog>

    <PagesTable :tableHeader="tableHeader" :tableData="tableData" :tableOperation="tableOperation"
      :tablePagination="tablePagination" @pageSize="pageSizeChange" @currentPage="currentPageChange"
      @pageOperation="handlePageOperation" />
  </div>
</template>

<script>
  import PagesTable from "../../components/PagesTable.vue";

  export default {
    components: {
      PagesTable
    },
    data() {
      return {
        tableHeader: [{
            name: "角色名称",
            mark: "roleName"
          },
          {
            name: "角色信息",
            mark: "roleInfo"
          },
          {
            name: "创建时间",
            mark: "createTime",
            minWidth: "100"
          },
          {
            name: "操作",
            mark: "",
            minWidth: "100"
          }
        ],
        tableOperation: [{
            name: "编辑",
            mark: "edit",
            icon: true
          },
          {
            name: "删除",
            mark: "delete",
            icon: true
          }
        ],
        tablePagination: {
          show: true,
          current: 1,
          size: 10,
          total: 2
        },
        tableData: [{
            roleName: "管理员",
            rid: 1,
            roleInfo: "最高权限管理员",
            createTime: "2024-06-17 10:31:12"
          },
          {
            roleName: "小员工",
            rid: 2,
            roleInfo: "最小级别员工",
            createTime: "2024-06-17 14:56:59"
          }
        ],
        tableDataAll: [],
        dialogAddVisible: false,
        addParam: {
          roleName: "",
          roleInfo: ""
        },
        dialogEditVisible: false,
        editParam: {
          rid: "",
          roleName: "",
          roleInfo: ""
        },
        dialogDeleteVisible: false,
        deleteParam: {
          rid: ""
        },
        formLabelWidth: "90px"
      };
    },
    mounted() {
      // this.getRole();
    },
    methods: {
      getRole() {
        const self = this;
        self.$axios.post("/service/__roleGet").then(res => {
          if (res.data.status === "success") {
            self.tableDataAll = res.data.res;
            self.tablePagination.total = self.tableDataAll.length;
            self.handleTableData();
          } else {
            self.$message(res.data.res);
          }
        });
      },
      handleTableData() {
        const self = this;
        self.tableData = [];
        let i = (self.tablePagination.current - 1) * self.tablePagination.size;
        let j = self.tablePagination.current * self.tablePagination.size;
        if (j > self.tablePagination.total) {
          j = self.tablePagination.total;
        }
        for (i; i < j; i++) {
          self.tableData.push(self.tableDataAll[i]);
        }
      },
      pageSizeChange(data) {
        this.tablePagination.size = data;
        this.handleTableData();
      },
      currentPageChange(data) {
        this.tablePagination.current = data;
        this.handleTableData();
      },
      handlePageOperation(row, mark) {
        const self = this;
        if (mark === "edit") {
          self.dialogEditVisible = true;
          self.editParam.rid = row.rid;
          self.editParam.roleName = row.roleName;
          self.editParam.roleInfo = row.roleInfo;
        } else if (mark === "delete") {
          self.dialogDeleteVisible = true;
          self.deleteParam.rid = row.rid;
        }
      },
      showAddRole() {
        const self = this;
        self.dialogAddVisible = true;
        self.addParam.roleName = "";
        self.addParam.roleInfo = "";
      },
      onAddRole() {
        const self = this;
        if (self.addParam.roleName === "") {
          self.$message("请输入角色名称");
        } else if (self.addParam.roleInfo === "") {
          self.$message("请输入角色信息");
        } else {
          self.$axios.post("/service/__roleAdd", self.addParam).then(res => {
            self.$message(res.data.res);
            self.getRole();
            self.dialogAddVisible = false;
            self.addParam.roleName = "";
            self.addParam.roleInfo = "";
          });
        }
      },
      onEditRole() {
        const self = this;
        self.$axios.post("/service/__roleMod", self.editParam).then(res => {
          self.$message(res.data.res);
          self.getRole();
          self.dialogEditVisible = false;
        });
      },
      onroleDel() {
        const self = this;
        self.$axios.post("/service/__roleDel", self.deleteParam).then(res => {
          self.$message(res.data.res);
          self.getRole();
          self.tablePagination.current = 1;
          self.dialogDeleteVisible = false;
        });
      }
    }
  };
</script>